<template>
  <div class="list">
    <div class="item" v-for="(item,index) in cozeList" :key="index">
      <div class="li" v-if="item.type=='in'">
        <div class="icon" @click="getPersonal(item)">
          <img :src="item.icon" alt>
        </div>
        <div class="txt">
          <img @click="openBag(item)" v-if="item.contentType=='img'" :src="item.content" alt>
          <span v-else>{{item.content}}</span>
        </div>
      </div>

      <div class="li li-right" v-else>
        <div class="icon">
          <img :src="item.icon" alt>
        </div>
        <div class="txt">
          <img @click="openBag(item)" v-if="item.contentType=='img'" :src="item.content" alt>
          <span v-else>{{item.content}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { send, getIMMsg } from "../../../im";
import { getEvent } from "../../../im";
import { hex_md5 } from "../../../utils/md5.js";
import { getGuid } from "../../../utils/index";
import { Toast } from "mint-ui";
export default {
  computed: {
    ...mapGetters(["cozeList"])
  },
  data() {
    getEvent(data => {
      this.Event = data;
    });
    //清空list列表
    this.cleanCozeItem();

    let account = JSON.parse(this.$route.query.item).account;
    //缓存中读取对方消息
    let msgArray = [];
    let count =
      parseInt(
        localStorage.getItem(
          localStorage.zyUserId + "_" + "from_" + account + "_msg_count"
        )
      ) || 0;
    for (let i = 0; i < count + 1; i++) {
      let msg = JSON.parse(
        localStorage.getItem(
          localStorage.zyUserId + "_" + "from_msg_" + account + "_" + i + "_"
        )
      );
      if (msg == null) {
        continue;
      }
      msgArray.push(msg);
    }
    //缓存中读取自己消息
    let sendCount =
      parseInt(
        localStorage.getItem(
          localStorage.zyUserId + "_" + "from_" + account + "_send_msg_count"
        )
      ) || 0;
    for (let i = 0; i < sendCount + 1; i++) {
      let msg = JSON.parse(
        localStorage.getItem(
          localStorage.zyUserId +
            "_" +
            "from_msg_send_" +
            account +
            "_" +
            i +
            "_"
        )
      );
      if (msg == null) {
        continue;
      }
      msgArray.push(msg);
    }
    msgArray = msgArray.sort(function(a, b) {
      return a.time - b.time;
    });
    for (let key in msgArray) {
      let item = {
        type: msgArray[key].flow,
        content: msgArray[key].text,
        icon: require("../../../assets/img/003.png")
      };
      this.addcozeItem(item);
    }
    //this.$el.scrollHeight - clientHeight;
    //var container = document.getElementById("list");

    // container.scrollTop = container.scrollHeight;

    var self = this;
    this.Event.$off();
    this.Event.$on("onmsg_" + account, function(data) {
      let item = {
        type: "in",
        content: data.text,
        icon: require("../../../assets/img/003.png")
      };
      self.addcozeItem(item);
    });

    return {};
  },

  updated() {
    this.$nextTick(function() {
      this.$el.scrollTop = this.$el.scrollHeight;
    });
  },

  mounted() {
    // 滚动到底部
    // this.$el.style.display = "block";
    // this.$el.scrollTop = this.$el.scrollHeight;
    // console.log(
    //   "container====================",
    //   this.$el.scrollHeight,
    //   this.$el.scrollTop
    // );
  },

  methods: {
    ...mapActions(["addcozeItem"]),
    ...mapActions(["cleanCozeItem"]),
    openBag(item) {
      this.$router.push({ path: "/rob", query: { item: item } });
    },
    getPersonal(item) {
      this.$router.push({ path: "/personal", query: { item: item } });
    }
  }
};
</script>
<style lang="stylus" scoped>
.list {
  width: 95%;
  margin: 0 auto;
  padding-bottom: 80px;
  box-sizing: border-box;

  .item {
    width: 100%;
    margin: 20px 0;
    clear: both;

    .li {
      display: flex;

      .icon {
        width: 0.72rem;
        height: 0.72rem;
        flex: 0 1 0.72rem;

        img {
          width: 0.72rem;
          height: 0.72rem;
        }
      }

      .txt {
        flex: 1;
        word-break: break-all;

        span {
          display: inline-block;
          background: #e5f4ff;
          line-height: 0.42rem;
          color: #000;
          padding: 10px 5px;
          margin-left: 5px;
          border-radius: 5px;
        }
      }

      img {
        width: 70%;
      }
    }

    .li-right {
      display: flex;

      .icon {
        width: 0.72rem;
        height: 0.72rem;
        flex: 0 1 0.72rem;
        position: absolute;
        right: 10px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .txt {
        flex: 1;
        text-align: right;
        margin-right: 0.82rem;
        word-break: break-all;

        span {
          display: inline-block;
          background: #5cacde;
          line-height: 0.42rem;
          color: #fff;
          padding: 10px 5px;
          margin-left: 5px;
          border-radius: 5px;
          text-align: left;
        }
      }

      img {
        width: 70%;
      }
    }
  }
}
</style>


